<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form x-data="SearchUserForm()" @submit.prevent="submitForm">
                        <div>
                            <label for='user_full_name'>@lang('dashboard.user.full_name')</label>
                            <input type="text" name="user_full_name" required x-model="formData.user_full_name" placeholder="@lang('dashboard.search.user_name')"/>
                        </div>
                        <button class="bg-gray-800 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded">@lang('dashboard.submit')</button>
                    </form>
                </div>
            </div>
            <div class="bg-white sm:rounded-lg" x-data="$store.getUsers">
                <table class="p-6 table-auto">
                    <thead>
                        <tr>
                            <th>@lang('dashboard.id')</th>
                            <th>@lang('dashboard.user.full_name')</th>
                            <th>@lang('dashboard.user.creation_date')</th>
                            <th>@lang('dashboard.user.roles')</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(user, index) in users" :key="index">
                            <tr>
                                <th x-text="user.user_id"></th>
                                <th x-text="user.user_full_name"></th>
                                <th x-text="user.user_created_at"></th>
                                <th x-text="user.roles_names"></th>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div class="bg-white sm:rounded-lg">
                <table class="table-auto">
                    <thead>
                        <tr>
                            <th>@lang('dashboard.id')</th>
                            <th>@lang('dashboard.role.name')</th>
                            <th>@lang('dashboard.role.permissions')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($roles as $role)
                            <tr>
                                <th>{{ $role->role_id }}</th>
                                <th>{{ $role->role_name }}</th>
                                <th>{{ $role->permissions_names }}</th>
                            </tr>
                        @empty
                            <tr>
                                <th cols=4>@lang('dashboard.role.empty')</th>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="bg-white sm:rounded-lg">
                <table class="table-auto">
                    <thead>
                        <tr>
                            <th>@lang('dashboard.id')</th>
                            <th>@lang('dashboard.permission.name')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($permissions as $permission)
                            <tr>
                                <th>{{ $permission->permission_id }}</th>
                                <th>{{ $permission->permission_name }}</th>
                            </tr>
                        @empty
                            <tr>
                                <th cols=4>@lang('dashboard.users.empty')</th>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('getUsers', {
            users : {{ Js::from($users) }},
            updateItems(items) {
                this.users = items;
            },
    });
});
</script>
